<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>银行APP云闪付版焕新升级</title>
    <link rel="stylesheet" href="css/all.min.css">
</head>

<body>
    <div class="wrap-box">
        <div class="prize-content content-box">
            <div class="lottery-wrap">
                <div class="max-width-560">
                    <img src="images/prize-title.png" alt="银行APP云闪付版">
                </div>
                <div class="lottery-cont">
                    <p class="text">您有<span class="num" id="lotteryNub">1</span>次抽奖机会</p>
                    <ul class="lottery-list">
                        <li class="item awards-item-1">
                            <div class="awards-img"><img src="images/awards-1.png" alt="中石油20-200元"></div>
                        </li>
                        <li class="item awards-item-2">
                            <div class="awards-img"><img src="images/awards-2.png" alt="京东E卡200元"></div>
                        </li>
                        <li class="item awards-item-3">
                            <div class="awards-img"><img src="images/awards-3.png" alt="屈臣氏20-80元"></div>
                        </li>
                        <li class="item awards-item-8">
                            <div class="awards-img"><img src="images/awards-8.png" alt="200办办币"></div>
                        </li>
                        <li class="lottery-start">
                            <div class="awards-img">
                                <img src="images/lottery-btn.png" class="lottery-btn J-lottery-btn" alt="立即抽奖">
                            </div>
                        </li>
                        <li class="item awards-item-4">
                            <div class="awards-img"><img src="images/awards-4.png" alt="华为P50"></div>
                        </li>
                        <li class="item awards-item-7">
                            <div class="awards-img"><img src="images/awards-7.png" alt="屈臣氏20-80元"></div>
                        </li>
                        <li class="item awards-item-6">
                            <div class="awards-img"><img src="images/awards-6.png" alt="中石油20-200元"></div>
                        </li>
                        <li class="item awards-item-5">
                            <div class="awards-img"><img src="images/awards-5.png" alt="京东E卡100元"></div>
                        </li>
                    </ul>
                </div>
                <div class="btn-bar">
                    <a href="my_prize.html" class="btn"> <img src="images/btn-go-prize.png" alt="我的奖品"> </a>
                    <a href="http://www.bankappupgrade.com/#/" class="btn"> <img src="images/btn-more.png" alt="点击了解更多优惠"> </a>
                    <a href="javascript:void(0)" class="btn J-share-btn"> <img src="images/btn-share.png" alt="与好友分享">
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 引导微信分享提示 start -->
    <div class="share-tips">
        <img src="images/share-tips.png" alt="点击“...”与好友分享">
    </div>
    <!-- //end -->
     <!-- 奖品弹框 start -->  
     <!-- 1 没有中奖用户都获得的参与奖 -->
     <div class="modalbox" id="awordsResult1">
        <div class="modalbox-mask"></div>
        <div class="modalbox-cont">
            <span class="close"></span>
            <div class="inner-box">
                <div class="card"> <img src="images/prize-card-1.png"> </div>
                <div class="f15">
                    指定银行APP（云闪付版）<br/>
                    享中石油满200元立减20元优惠 <br/>
                    屈臣氏满80元立减20元优惠 <br/>
                    活动截止于2022年12月31日
                </div>
                <div class="modalbox-btn">
                    <a href="http://www.bankappupgrade.com/#/"><img src="images/more-btn.png" alt="了解活动详情"></a>
                </div>
            </div>
        </div>
    </div>
    <!-- 2 京东e卡 实物发放奖励 -->
    <div class="modalbox" id="awordsResult2">
        <div class="modalbox-mask"></div>
        <div class="modalbox-cont">
            <span class="close"></span>
            <div class="inner-box">
                <div class="card"> <img src="images/prize-card-2.png"> </div>
                <div class="tips">您的奖品将于中奖名单公布的30个工作日内寄出</div>
                <div class="modalbox-form">
                    <div class="item">
                        <label class="label">姓名</label> <input type="text" class="input" id="name">
                    </div>
                    <div class="item">
                        <label class="label">手机号</label> <input type="text" class="input" id="phone">
                    </div>
                    <div class="item">
                        <label class="label">地区</label> <input type="text" class="input" id="area">
                    </div>
                    <div class="item">
                        <label class="label">详细地址</label> <input type="text" class="input" id="address">
                    </div>
                    <div class="txt">收件地址填写后无法进行修改，<br/>
                        请确认信息无误。</div>
                </div>
                <div class="modalbox-btn">
                    <a href="javascript:void(0)" class="J-submit-btn"><img src="images/comfirm-btn.png" alt="确定提交"></a>
                </div>
            </div>
            <!-- <img src="images/modalbox-bg.png"> -->
        </div>
    </div>
    <!-- // end -->

     <!-- 3 抽奖次数用完提示 -->
     <div class="modalbox" id="noneNumber">
        <div class="modalbox-mask"></div>
        <div class="modalbox-cont none_nub_tip">
            <span class="close"></span>
            <div class="inner-box">
               <h3 class="f15"> 今日您已参加过抽奖，明日再来！ </h3>
            </div>
            <!-- <img src="images/modalbox-bg.png"> -->
        </div>
    </div>

    <script src="js/Zepto.1.2.0.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="js/common.js"></script>
    <script>

        isGoToIndex()  // 判断是否要去到首页 如果已经本地已经有localStorage.getItem('ipnone')

        $(function () {
            
            var isLottery = true; // 每个认证用户只能抽奖一次
           
            var last_index = 0, //上一回滚动的位置
                amplification_index = 0, //轮盘的当前滚动位置,0表示为第一次
                roll_flag = true, //是否允许滚动
                max_number = 9, //轮盘的全部数量
                speed = 300, //速度，速度值越大，则越慢初始化为300
                finalindex = 3, //最终的奖励
                myInterval = "", //定时器
                max_speed = 40, //滚盘的最大速度
                minturns = 10, //最小的圈数为2
                runs_now = 0; //当前已跑步数

            $(".J-lottery-btn").on("click", function () {
                // 初始化遮罩层
                $('.lottery-list').addClass('on') // 添加抽奖遮罩层
                // 后台拉取数据 模拟数据
                var awardsId = 8 //creatRandomNum(1,8); // 随机生成奖项id
                console.log(awardsId)
                var resultData = {
                    LotteryID: awardsId, // 
                    //LotteryType: 2, // 类型 
                    LotteryContent: '京东e卡200元', // 中奖内容
                    RewardCode: 'QWERTYUO123456', // 京东E卡兑奖密码 其他奖项为null
                    // LotteryTips: '请在活动结束前及时前往京东app领取' 
                }          

                if (!isLottery) return // 每个认证用户只能抽奖一次

                isLottery = false

                runs_now = 0; // 初始化步数
                finalindex = Number(resultData.LotteryID)  // 最终奖励				
                $(this).addClass('disabled')
                //当前可以点击的状态下
                if (roll_flag) {
                    roll_flag = false;
                    //启动滚盘
                    rolling(function () {
                        console.log('抽奖完成')
                        setTimeout(()=>{
                            lotteryPopRender(resultData)
                        },600)
                        
                    });
                }

            });

            //滚动轮盘的动画效果
            //滚动轮盘的动画效果
            function rolling(cb) {
                myInterval = setTimeout(function () {
                    rolling(cb);
                }, speed);
                runs_now++; //已经跑步数加一
                amplification_index++; //当前的加一
                //获取总步数，接口延迟问题，所以最后还是设置成1s以上
                var count_num = minturns * max_number + finalindex - last_index;
                console.log(count_num);
                //上升期间
                if (runs_now <= (count_num / 3) * 2) {
                    speed -= 30; //加速
                    if (speed <= max_speed) {
                        speed = max_speed; //最高速度为40；
                    }
                }
                //抽奖结束
                else if (runs_now >= count_num) {
                    clearInterval(myInterval);
                    last_index = amplification_index;
                    roll_flag = true;
                    // callback(); // 返回函数
                    // console.log('抽奖结束')
                    cb && cb();
                }
                //下降期间
                else if (count_num - runs_now <= 10) {
                    speed += 20;
                }
                //缓冲区间
                else {
                    speed += 10;
                    if (speed >= 100) {
                        speed = 100; //最低速度为100；
                    }
                }
                if (amplification_index > max_number) { //判定！是否大于最大数
                    amplification_index = 1;
                }
                //刷新页面
                var strli = ".awards-item-";
                strli += amplification_index;
                //全部清除
                $(".lottery-list .item").each(function () {
                    $(this).addClass('opcity50').removeClass('active')
                })
                //画颜色
                $(strli).removeClass('opcity50').addClass('active')
            }

            // 中奖结果弹框渲染并显示
            function lotteryPopRender(opts) {
                //console.log("恭喜您中奖啦，奖品是" + opts.LotteryContent)
                var nub = opts.LotteryID,// 弹框序号
                    imgNub = opts.LotteryID;

                if(opts.LotteryID == 3 || opts.LotteryID == 4 || opts.LotteryID == 6 || opts.LotteryID == 7){
                    nub = 1   
                    imgNub =  opts.LotteryID == 3 || opts.LotteryID == 7 ? 3 : 1;             
                }
                if(opts.LotteryID == 5 || opts.LotteryID == 8){
                    nub = 2
                }
                $('#awordsResult'+nub).find('.card img').attr('src','images/prize-card-'+imgNub+'.png')
  
                var modalboxParams = {
                    container:$('#awordsResult'+nub)
                }
                modalboxOpend(modalboxParams)
            }  
            
            // 抽奖次数用完提示
            modalboxOpend({container:$('#noneNumber')})

            
            // 填写地址信息提交
            $('body').on('click','.J-submit-btn',userInforSubmit)

            function userInforSubmit(){

                let phoneReg = /^1[3456789]\d{9}$/;
                let name = $('#name').val().trim(),
                    phone = $('#phone').val().trim(),
                    area = $('#area').val().trim(),
                    address = $('#address').val().trim();
                // console.log(phoneReg.test(phone))
                if(!name){
                    txtTipsPop('请填写正确的姓名',function(){
                        $('#name').focus()
                    });            
                    return false
                }
                if(!phone || !phoneReg.test(phone)){
                    txtTipsPop('请填写正确的手机号码',function(){
                        $('#phone').focus()
                    })                
                    return false
                }
                if(!area){
                    txtTipsPop('请填写地区',function(){
                        $('#area').focus()
                    })               
                    return false
                }
                if(!address){
                    txtTipsPop('请填写详细地址',function(){
                        $('#address').focus()
                    })                
                    return false
                } 
                // 前台验证结束

                // 提交后台服务器，成功则执行以下方法，给一个提示
                txtTipsPop('信息提交成功，奖品将于名单公布后的30个工作日内寄出',function(){
                    // 关闭表单提交，看是否需要关闭，后台根据客户需求自主去调试
                    // do something 如果需要关闭表单弹框，打开注释，执行以下代码
                    // $('.modalbox').removeClass('opened') // 关闭所有弹框
                },'success')

            }

            $('.J-share-btn').click(function(){
                $('.share-tips').addClass('show')
            })
            $('.share-tips').click(function(){
                $(this).removeClass("show")
            })

            function creatRandomNum(minNum,maxNum){
                return Math.floor(Math.random()*maxNum+minNum)
            }

            // console.log(creatRandomNum(1,8))
            
        })
    </script>
    <script src="js/wx_share.js"></script>  
</body>

</html>